<template>
	<div class="searchBar">
		<input class="searchBar_input" v-model.trim="value" type="text" placeholder="请输入搜索内容" maxlength=20 confirm-type="搜索" @input="onInput">
	</div>
</template>

<script>
	export default {
		data () {
			return {
				value: ''
			}
		},
		methods: {
			onInput () {
				setTimeout(() => {
					this.$emit('handleInput', this.value)
				}, 0)
			}
		}
	}
</script>

<style scoped>
	.searchBar {
		width: 100%;
		box-sizing: border-box;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 48rpx;
		padding: 0 40rpx;
	}
	.searchBar_input {
		width: 100%;
		height: 100%;
		border-radius: 26rpx;
		box-shadow:  0 0 12rpx rgba(254,254,254,0.2), 0 0 10rpx rgba(254,254,254,0.2);
		background-color: rgba(254,254,254,0.2);;
		box-sizing: border-box;
		padding: 0 40rpx;
	}
</style>
